<template>
  <div id="app">
    <page1 :class="{'page-before': current > 0}"></page1>
    <page2 :class="{'page-before': current > 1, 'page-after': current < 1}"></page2>
    <page3 :class="{'page-before': current > 2, 'page-after': current < 2}"></page3>
    <page4 :class="{'page-before': current > 3, 'page-after': current < 3}"></page4>
    <page5 :class="{'page-before': current > 4, 'page-after': current < 4}"></page5>
    <page6 :class="{'page-before': current > 5, 'page-after': current < 5}"></page6>
    <page7 :class="{'page-before': current > 6, 'page-after': current < 6}"></page7>
    <page8 :class="{'page-before': current > 7, 'page-after': current < 7}"></page8>
    <page9 :class="{'page-before': current > 8, 'page-after': current < 8}"></page9>
    <page10 :class="{'page-after': current < 9}"></page10>
  </div>
</template>

<script>
  import './script/swipe.js';
  import page1 from './page1/page1';
  import page2 from './page2/page2';
  import page3 from './page3/page3';
  import page4 from './page4/page4';
  import page5 from './page5/page5';
  import page6 from './page6/page6';
  import page7 from './page7/page7';
  import page8 from './page8/page8';
  import page9 from './page9/page9';
  import page10 from './page10/page10';
  import './style/common.css';
  export default {
    name: 'app',
    data(){
      return {
        current: 0,
        total: 10
      }
    },
    components: { page1, page2, page3, page4,page5, page6, page7, page8, page9, page10 },
    mounted(){
      window.addEventListener('swipeup',e=>{
        this.current = Math.min(++this.current,this.total-1);
      })
      window.addEventListener('swipedown',e=>{
        this.current = Math.max(--this.current,0);
      })
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }


</style>
